<!-- 健康讲堂 -->
<template>
  <div class="container Pd-T60">
    <!--标语-->
    <div class="title">
      <!--健康讲堂-->
      <div class="jkjt">
        <div class="floor_title_box">
          <i class="floor_title_icon Mg-R10"></i>
          <p class="floor_title Mg-R10">健康讲堂</p>
          <span class="floor_title_info"></span>
        </div>
      </div>
      <!--名医问答-->
      <div class="mywd">
        <div class="floor_title_box">
          <i class="floor_title_icon Mg-R10"></i>
          <p class="floor_title Mg-R10">名医问答</p>
          <span class="floor_title_info"></span>
        </div>
      </div>
    </div>
    <!--内容容器-->
    <div class="content">
      <!--健康讲堂-->
      <div class="jkjt_content">
        <ul>
          <li>
            <div class="doctor_photo"><img src="../../common/img/index/pic_jkjt.png" alt=""></div>
            <div class="jkjt_info_box">
              <span class="Ft-S16 Color_black Overflow1">湿疹如何治愈？</span>
              <span class="Ft-S14 Color_gray6">王满强  主治医师</span>
              <span class="Ft-S14 Color_gray6 Overflow1">北京市清华大学附属医院</span>
              <span class="Ft-S14 Color_grayA">2018-08-27</span>
            </div>
          </li>
          <li>
            <div class="doctor_photo"><img src="../../common/img/index/pic_jkjt.png" alt=""></div>
            <div class="jkjt_info_box">
              <span class="Ft-S16 Color_black Overflow1">湿疹如何治愈？</span>
              <span class="Ft-S14 Color_gray6">王满强  主治医师</span>
              <span class="Ft-S14 Color_gray6 Overflow1">北京市清华大学附属医院</span>
              <span class="Ft-S14 Color_grayA">2018-08-27</span>
            </div>
          </li>
          <li>
            <div class="doctor_photo"><img src="../../common/img/index/pic_jkjt.png" alt=""></div>
            <div class="jkjt_info_box">
              <span class="Ft-S16 Color_black Overflow1">湿疹如何治愈？</span>
              <span class="Ft-S14 Color_gray6">王满强  主治医师</span>
              <span class="Ft-S14 Color_gray6 Overflow1">北京市清华大学附属医院</span>
              <span class="Ft-S14 Color_grayA">2018-08-27</span>
            </div>
          </li>
          <li>
            <div class="doctor_photo"><img src="../../common/img/index/pic_jkjt.png" alt=""></div>
            <div class="jkjt_info_box">
              <span class="Ft-S16 Color_black Overflow1">湿疹如何治愈？</span>
              <span class="Ft-S14 Color_gray6">王满强  主治医师</span>
              <span class="Ft-S14 Color_gray6 Overflow1">北京市清华大学附属医院</span>
              <span class="Ft-S14 Color_grayA">2018-08-27</span>
            </div>
          </li>
          <li>
            <div class="doctor_photo"><img src="../../common/img/index/pic_jkjt.png" alt=""></div>
            <div class="jkjt_info_box">
              <span class="Ft-S16 Color_black Overflow1">湿疹如何治愈？</span>
              <span class="Ft-S14 Color_gray6">王满强  主治医师</span>
              <span class="Ft-S14 Color_gray6 Overflow1">北京市清华大学附属医院</span>
              <span class="Ft-S14 Color_grayA">2018-08-27</span>
            </div>
          </li>
          <li>
            <div class="doctor_photo"><img src="../../common/img/index/pic_jkjt.png" alt=""></div>
            <div class="jkjt_info_box">
              <span class="Ft-S16 Color_black Overflow1">湿疹如何治愈？</span>
              <span class="Ft-S14 Color_gray6">王满强  主治医师</span>
              <span class="Ft-S14 Color_gray6 Overflow1">北京市清华大学附属医院</span>
              <span class="Ft-S14 Color_grayA">2018-08-27</span>
            </div>
          </li>
        </ul>
      </div>
      <!--名医问答-->
      <div class="mywd_content">
        <ul>
          <li>
            <div class="question">
              <i class="icon_question"></i>
              <span class="Ft-S14 Color_black">医生请问服用阿莫西林有什么需要注意的吗？</span>
            </div>
            <div class="answer">
              <i class="icon_answer"></i>
              <div class="mywd_box">
                <div class="answer_doctor">
                  <div>
                    <span class="Ft-S12 Color_blue Mg-R10">王满囤</span>
                    <span class="Ft-S12 Color_gray6">北京市清华大学附属医院</span>
                  </div>
                  <div class="answer_time">2018-08-28</div>
                </div>
                <div class="answer_info Ft-S14 Color_black Overflow2 Mg-T10">
                  您好，很高兴为您解答，关于阿莫西林的用途想必您也是知道的，作为目前市场上的主要阿莫西林...
                </div>
              </div>
            </div>
          </li>
          <li>
            <div class="question">
              <i class="icon_question"></i>
              <span class="Ft-S14 Color_black">医生请问服用阿莫西林有什么需要注意的吗？</span>
            </div>
            <div class="answer">
              <i class="icon_answer"></i>
              <div class="mywd_box">
                <div class="answer_doctor">
                  <div>
                    <span class="Ft-S12 Color_blue Mg-R10">王满囤</span>
                    <span class="Ft-S12 Color_gray6">北京市清华大学附属医院</span>
                  </div>
                  <div class="answer_time">2018-08-28</div>
                </div>
                <div class="answer_info Ft-S14 Color_black Overflow2 Mg-T10">
                  您好，很高兴为您解答，关于阿莫西林的用途想必您也是知道的，作为目前市场上的主要阿莫西林...
                </div>
              </div>
            </div>
          </li>
          <li>
            <div class="question">
              <i class="icon_question"></i>
              <span class="Ft-S14 Color_black">医生请问服用阿莫西林有什么需要注意的吗？</span>
            </div>
            <div class="answer">
              <i class="icon_answer"></i>
              <div class="mywd_box">
                <div class="answer_doctor">
                  <div>
                    <span class="Ft-S12 Color_blue Mg-R10">王满囤</span>
                    <span class="Ft-S12 Color_gray6">北京市清华大学附属医院</span>
                  </div>
                  <div class="Ft-S12 Color_grayA">2018-08-28</div>
                </div>
                <div class="answer_info Ft-S14 Color_black Overflow2 Mg-T10">
                  您好，很高兴为您解答，关于阿莫西林的用途想必您也是知道的，作为目前市场上的主要阿莫西林...
                </div>
              </div>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>


<script>
  export default {
    name: 'Jkjt',
    data() {
      return {}
    },
  }
</script>

<style scoped>
  .jkjt .floor_title_icon {
    background-image: url("../../common/img/index/floor_icon_jkjt.png");
  }

  .mywd .floor_title_icon {
    background-image: url("../../common/img/index/floor_icon_mywd.png");
  }

  .mywd .floor_title_info,
  .jkjt .floor_title_info {
    width: 12px;
    height: 21px;
    background-image: url("../../common/img/icon/icon_arrow_right_big.png");
    background-size: cover;
  }

  /*******标题*********/
  .title {
    display: flex;
  }

  /*健康讲堂*/
  .jkjt {
    width: 800px;
  }

  /*名医问答*/
  .mywd {
    flex-grow: 1;
  }

  /******内容容器******/
  .content {
    margin-top: 20px;
    display: flex;
    height: 470px;
  }

  /*健康讲堂*/
  .jkjt_content {
    border-top: 2px solid rgba(136, 188, 104, 1);
    min-width: 800px;
    max-width: 800px;
    height: 100%;
  }

  .jkjt_content ul {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    padding: 30px 0;
    height: 100%;
  }

  .jkjt_content li {
    width: 50%;
    display: flex;
    position: relative;
    height: 100px;
  }

  .jkjt_content li:nth-child(odd) {
    border-right: 1px dashed #e6e6e6;
  }

  .jkjt_content li:nth-child(2n) {
    padding-left: 40px;
  }

  .jkjt_content .doctor_photo {
    min-width: 140px;
    width: 140px;
    height: 100px;
    margin-right: 20px;
  }

  .jkjt_content .doctor_photo > img {
    width: 100%;
    height: 100%;
  }

  .jkjt_content .jkjt_info_box {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  /*名医问答*/
  .mywd_content {
    flex-grow: 1;
    height: 100%;
    border: 1px solid #e6e6e6;
    border-top: 2px solid rgba(18, 141, 255, 1);
  }

  .mywd_content ul {
    padding: 0 30px;
  }

  .mywd_content li {
    padding: 30px 0;
    border-bottom: 1px dashed #e6e6e6;
  }

  .mywd_content li:last-child {
    border-bottom: none;
  }

  .mywd_content li .question {
    align-items: center;
    margin-bottom: 10px;
  }

  .mywd_content li > div {
    display: flex;
    justify-content: flex-start;
  }

  .mywd_content li > div i {
    display: block;
    min-width: 20px;
    height: 20px;
    margin-right: 10px;
    background-repeat: no-repeat;
    background-size: cover;
  }

  .mywd_content li .icon_question {
    background-image: url("../../common/img/icon/icon_question.png");
  }

  .mywd_content li .icon_answer {
    background-image: url("../../common/img/icon/icon_answer.png");
  }

  .mywd_content li .mywd_box {
    display: flex;
    flex-direction: column;
  }

  .mywd_content li .mywd_box .answer_doctor {
    display: flex;
    justify-content: space-between;
  }

  .mywd_content li .mywd_box .answer_info {
    line-height: 1.3;
  }

</style>
